<template>
  <div>
    <div class="cart-header">
      <p>
        <i
          class="el-icon-document-checked"
          style="color: rgb(207, 124, 124); font-weight: 600;"
        ></i>
        我的订单
      </p>
    </div>
    <el-row id="order">
      <el-col
        :span="8"
        v-for="(o, index) in orders"
        :key="index"
        :offset="index > 0 ? 2 : 0"
        class="order"
      >
        <el-card :body-style="{ padding: '0px' }">
          <label style="margin-left: 20px !important; font-size: 25px;">
            <!-- 订单号 -->
            {{ '订单号:' + o.num }}

            <!-- 订单时间 -->
            <label style="float: right; margin-right: 20px !important;">
              {{ o.time }}
            </label>
          </label>
          <hr />
          <img :src="o.url" class="image" />
          <div class="msg" style="padding: 14px;">
            <i class="iconfont icon-mendian1"></i>
            <span
              style="margin-left: 1px; font-size: 20px; font-family: fantasy;"
            >
              <!-- 商家 -->
              <b>
                {{ o.merchant }}
              </b>
            </span>
            <a
              href="/all"
              style="
                color: rgb(125, 125, 125);
                margin-left: 10px;
                font-size: 25px;
              "
            >
              >
            </a>

            <br />
            <br />

            <!-- 商品简介 -->
            <span
              style="
                margin-left: 1px;
                font-size: 19px;
                color: rgb(52, 52, 52);
                font-family: cursive;
              "
            >
              {{ o.description }}
            </span>
            <br />
            <br />

            <!-- 商品规格 -->
            <span
              style="
                margin-left: 1px;
                font-size: 15px;
                color: rgb(125, 125, 125);
                font-family: cursive;
              "
            >
              {{ o.specifications }}
            </span>
            <br />
            <br />
            <span style="margin-left: 1px; font-size: 17px;">
              总计:{{ o.money }}元
            </span>

            <div class="bottom clearfix">
              <el-button round @click="dialogVisible = true">
                查看详情
              </el-button>
              <a>
                <el-button @click="Pay(index)" round v-show="isPays">
                  付款
                </el-button>
              </a>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 订单详情 -->
    <el-dialog
      v-for="(orders, index) in orders"
      :key="index"
      title="订单详情"
      :visible.sync="dialogVisible"
      width="28%"
    >
      <span>订单号:{{ orders.num }}</span>
      <br />
      <span>订单创建时间:{{ orders.time }}</span>
      <br />
      <span>商家:{{ orders.merchant }}</span>
      <br />
      <span>规格:{{ orders.specifications }}</span>
      <br />
      <span>收货人:{{ orders.consignee }}</span>
      <br />
      <span>收货地址:{{ orders.address }}</span>
      <br />
      <span>电话:{{ orders.phone }}</span>
      <br />
      <span>订单状态:{{ orders.status }}</span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isPays: true,
      orders: [
        {
          num: 644444446,
          url:
            'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          merchant: '华麦基汉堡店',
          description: '老八秘制蟹黄堡，既实惠又管饱，来点小鸟伏特加。',
          specifications: '老八秘制套餐+小食+中可',
          time: Date.now(),
          consignee: '景衡光',
          address: '闽西职业技术学院',
          phone: '13569878462',
          money: '4646',
          status: '未支付',
        },
        {
          num: 644444446,
          url:
            'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          merchant: '华麦基汉堡店',
          description: '老八秘制蟹黄堡，既实惠又管饱，来点小鸟伏特加。',
          specifications: '老八秘制套餐+小食+中可',
          time: Date.now(),
          consignee: '景衡光',
          address: '闽西职业技术学院',
          phone: '13569878462',
          money: '4646',
          status: '未支付',
        },
      ],
      dialogVisible: false,
    }
  },
  methods: {
    Pay(index) {
      this.$router.push({
        path: 'checkout',
        query: { num: this.orders[index].num, money: this.orders[index].money },
      })
      console.log(this.$router)
    },
  },
  mounted() {
    this.isPays = true
    var status = 0
    if (status === 1) {
      this.isPays = !this.isPays
    }
  },
}
</script>
<style scoped>
hr {
  background-color: rgb(0, 0, 0) !important;
  height: 1.3px !important;
}
.cart-header {
  height: 40px !important;
  background-color: #fff !important;
  font-size: 25px !important;
  color: rgb(207, 124, 124) !important;
  border-bottom: 1px solid rgb(207, 124, 124) !important;
}
.cart-header i {
  margin-left: 20px !important;
}
.iconfont {
  color: rgb(181, 110, 4) !important;
}
.order {
  margin-bottom: 15px !important;
  margin-left: 20px !important;
  width: 97vw !important;
  float: left !important;
}
.msg {
  float: left !important;
}
.el-card img {
  width: 210px !important;
  border: none !important;
  padding: 20px !important;
  float: left !important;
}
.time {
  font-size: 13px !important;
  color: #999 !important;
}

.bottom {
  margin-top: 18px !important;
  line-height: 12px !important;
}

.button {
  padding: 0 !important;
  float: right !important;
}

.image {
  width: 100% !important;
  display: block !important;
}

.clearfix:before,
.clearfix:after {
  display: table !important;
  content: '' !important;
}

.clearfix:after {
  clear: both !important;
}
.el-dialog span {
  font-size: 17px !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: black;
}
</style>
